* {
  padding: 0;
  margin: 0;
  outline: none;
}

html,
body,
#app {
  min-width: 1000px;
  height: 100%;
  min-height: 500px;
  font-size: 14px;
  //禁止选中文字
  //-moz-user-select: none;
  //-khtml-user-select: none;
  //user-select: none;
}

html {
  line-height: 1.15;
  /* Correct the line height in all browsers */
  -webkit-text-size-adjust: 100%;
  /* Prevent adjustments of font size after orientation changes in iOS. */
}

body {
  margin: 0;
}

a {
  background-color: transparent;
  /* Remove the gray background on active links in IE 10. */
}

img {
  border-style: none;
  /* Remove the border on images inside links in IE 10. */
}

/*滚动条整体样式*/
::-webkit-scrollbar {
  width: 10px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 10px;
}

/*滚动条里面小方块*/
::-webkit-scrollbar-thumb {
  background: $link-color;
}

/*滚动条里面轨道*/
::-webkit-scrollbar-track {
  background: $primary-gray;
}

.phq {
  //导航菜单
  &-menu {
    //导航菜单 图标
    &-icon {
      text-align: left;
      display: inline-block;
      //width: 25px;
      margin-right: 5px;
      font-size: 16px;
      color: #ffffff;
      border-radius: 4px;
      overflow: hidden;

      & > img {
        max-width: 25px;
        max-height: 25px;
        border-radius: 2px;
        box-shadow: 0 0 5px $box-gray-color;
      }

      & > i {
        height: 20px;
        line-height: 20px;
        /*width: 20px;
        text-align: center;
        border-radius: 4px;*/
        background-color: rgba($color: #000, $alpha: 0) !important;
      }
    }
  }

  // 表单
  &-from {
    &-item2 {
      display: flex;
      justify-content: space-between;

      & > div {
        width: 50%;
      }
    }

    &-item3 {
      display: flex;
      justify-content: space-between;

      & > div {
        width: 33%;
      }
    }

    &-item4 {
      display: flex;
      justify-content: space-between;

      & > div {
        width: 25%;
      }
    }

    &-item5 {
      display: flex;
      justify-content: space-between;

      & > div {
        width: 20%;
      }
    }
  }
}

.form {
  &-item {
    &-div {
      display: flex;
      // align-items: center;
      & > span {
        width: 5px;
      }
    }
  }

  &-item2 {
    display: flex;
    // align-items: center;
    justify-content: space-between;

    & > div {
      width: calc(50% - 10px);
    }
  }

  &-item3 {
    display: flex;
    //align-items: center;
    justify-content: space-between;

    & > div {
      width: calc(33.33% - 10px);
    }
  }

  &-item4 {
    display: flex;
    //align-items: center;
    justify-content: space-between;

    & > div {
      width: calc(25% - 10px);
    }
  }

  &-item5 {
    display: flex;
    //align-items: center;
    justify-content: space-between;

    & > div {
      width: calc(20% - 10px);
    }
  }

  &-item-n {
    display: flex;
    //align-items: center;
  }
}


.page {
  &-action {
    &-btn {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      background-color: $text-gray4-color;
      border: 1px $text-gray2-color solid;
      border-bottom: none;
      padding: 5px 10px;

      & > * {
        margin-left: 1px;
      }

      & .el-button + .el-button {
        margin-left: 1px;
      }

      & .el-button {
        min-height: auto;
        padding: 4px 8px;
        border-radius: 2px;
      }
    }
    &-ex {
      &-btn {
        display: flex;
        justify-content: space-between;
        background-color: var(--phq-background-color);
        border: 1px var(--border-color-lighter) solid;
        border-bottom: none;
        padding: 5px 10px;

        & > div {
          display: flex;
          align-items: center;

          &:first-child {
            justify-content: flex-start;
          }

          &:last-child {
            justify-content: flex-end;
          }

          & > * {
            margin-left: 1px;
          }

          & .el-button + .el-button {
            margin-left: 1px;
          }

          & .el-button {
            height: auto;
            min-height: auto;
            padding: 4px 8px 3px 8px;
            border-radius: 2px;
          }

          & .el-input__inner {
            height: 26px;
            line-height: 26px;
          }
        }

      }
    }
  }
  &-form {
    display: flex;
    align-items: center;

    & > .span {
      height: 10px;
    }
    & > div {
      flex: 1;
      margin-left: 10px;

      &:first-child {
        margin-left: 0;
      }
    }

  }
}

.page {
  &-action {
    &-ex {
      &-btn {
        display: flex;
        justify-content: space-between;
        background-color: $text-gray4-color;
        border: 1px $text-gray2-color solid;
        border-bottom: none;
        padding: 5px 10px;

        & > div {
          display: flex;
          align-items: center;

          &:first-child {
            justify-content: flex-start;
          }

          &:last-child {
            justify-content: flex-end;
          }

          & > * {
            margin-left: 1px;
          }

          & .el-button + .el-button {
            margin-left: 1px;
          }

          & .el-button {
            min-height: auto;
            padding: 4px 8px;
            border-radius: 2px;
          }
        }
      }
    }
  }
}

.page {
  &-search {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 5px 10px;

    & > div {
      margin-right: 5px;
    }
  }
}

// element-ui 样式覆盖---- START -------------

// 设置导航菜单折叠的时候隐藏文字和箭头
.el-menu--collapse > div > .el-submenu > .el-submenu__title span {
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  display: inline-block;
  transition: all 0.3s;
}

.el-menu--collapse
> div
> .el-submenu
> .el-submenu__title
.el-submenu__icon-arrow {
  transition: all 0.3s;
  display: none;
}

//-------------------------------
// 设置消息框文字自动换行
.el-message-box__message {
  word-wrap: break-word;
}

//ele 表格头背景颜色
.el-table {
  font-size: 14px;
  overflow: visible !important;
}

.el-table thead th {
  background-color: $text-gray4-color;
}

.el-table th,
.el-table td {
  padding: 8px 0;
}

.el-table .cell {
  line-height: normal;
}

.el-radio,
.el-checkbox {
  margin-right: 10px;
}

.el-checkbox__label {
  padding-left: 5px;
}

//-----------表格行选中颜色-------------------------------------------------
.el-table__body tr.current-row,
.el-table__body tr.current-row:hover {
  & > td {
    background-color: #fee3b8; //el table 表格选中行颜色
    //el table 表格选中行边框
    border-top: 1px #fc5205 dashed;
    border-bottom: 1px #fc5205 dashed;
  }
}

//----------树控件选中行颜色------------------
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background-color: #fee3b8; //el table 表格选中行颜色
  //el table 表格选中行边框
  border-top: 1px #fc5205 dashed;
  border-bottom: 1px #fc5205 dashed;
}

// 对话框
.el-overlay.is-message-box {
  display: block;
}

// Dialog 对话框
.el-overlay {
  display: flex;
}

.el-dialog {
  border-radius: 5px;
  margin: auto;
}

.el-dialog__body {
  padding: 0;
}

.el-dialog__wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-dialog__header {
  padding: 10px;
  background-color: #fdfdfd;
  border-bottom: 1px #eaeaea solid;
  //box-shadow:0 0 5px #C5C5C5;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}

.el-dialog__headerbtn {
  top: 15px;
  right: 15px;
}

.el-dialog__footer {
  padding: 10px;
  background-color: #fdfdfd;
  //box-shadow:0 0 5px #C5C5C5;
  border-top: 1px #eaeaea solid;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

.el-pagination.is-background .btn-prev,
.el-pagination.is-background .btn-next {
  padding: 0 6px;
}

//--------------------END-----------------

/*===============动画效果========================*/
.opacity-scale-animation {
  &-enter-active {
    animation: opacity-scale-animation-keyframes 0.3s;
  }

  &-leave-active {
    animation: opacity-scale-animation-keyframes 0.3s reverse;
  }

  @keyframes opacity-scale-animation-keyframes {
    0% {
      opacity: 0;
      transform-origin: 0 0;
      transform: scale(0);
    }

    100% {
      opacity: 1;
      transform-origin: 0 0;
      transform: scale(1);
    }
  }
}

//----------------------------------------------------
.opacity-translateX {
  &-enter-active,
  &-leave-active {
    transition: all 0.3s ease-in;
  }

  &-enter,
  &-leave-to {
    opacity: 0;
    transform: translateY(30px);
  }

  &-move {
    transition: all 0.5s ease-in;
  }

  &-leave-active {
    position: absolute;
  }
}

//------------------------------------------------
.scale-origin-animation {
  &-enter-active {
    animation: scale-origin-animation-keyframes 0.5s ease-out;
  }

  &-leave-active {
    animation: scale-origin-animation-keyframes 0.5s ease-in reverse;
  }

  @keyframes scale-origin-animation-keyframes {
    0% {
      transform: scale(0);
      transform-origin: var(--p-origin-x) var(--p-origin-y);
    }
    100% {
      transform: scale(1);
      transform-origin: 50% 50%;
    }
  }
}

/*==============================================*/
.table-action {
  .el-button + .el-button {
    margin-left: 1px;
  }

  .el-button--small {
    min-height: 23px;
    padding: 0 5px;
    border-radius: 0;

    &:first-child {
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
    }

    &:last-child {
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }
  }
}
